<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
                 xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="模板">
    <meta name="description" content="后台管理系统">
    <meta name="author" content="SoulCoder">
    <div th:include="~{views/common/include :: cssStyle }"></div>
</head>
<body>
<div class="coder-layout-web">
    <div class="coder-layout-container">
        <!--左侧导航-->
        <div th:include="~{views/common/include :: #asideStyle }"></div>
        <!--End 左侧导航-->
        <!--头部信息-->
        <div th:include="~{views/common/include :: #headerStyle }"></div>
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="coder-layout-content">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <!-- 查询搜索框start-->
                                <div id="toolbar">
                                    <div class="my-container">
                                        <label class="myLabel-content">名称：</label>
                                        <div class="myText-content">
                                            <input id="q_username" name="username" type="text" class="form-control" placeholder="输入名称">
                                        </div>
                                    </div>
                                    <div class="my-container">
                                        <label class="myLabel-content">邮件：</label>
                                        <div class="myText-content">
                                            <input id="q_email"  name="email"   type="text" class="form-control" placeholder="输入邮件">
                                        </div>
                                    </div>
                                    <div class="myBtn-content">
                                        <button id="search" type="button" class="btn btn-primary" data-toggle="modal" data-method="search">
                                            <i class="mdi mdi-account-search"></i>搜索</button>
                                    </div>
                                </div>
                                <!-- 查询搜索框end-->
                                <!-- 按钮区start-->
                                <div class="toolbar-btn-action">
                                    <button sec:authorize= "hasRole('管理员') && hasAuthority('user:add')" type="button" class="btn btn-primary" data-toggle="modal" data-method="add" >
                                        <i class="mdi mdi-plus"></i>新增
                                    </button>
                                    <button sec:authorize= "hasRole('管理员')" type="button" class="btn btn-primary" data-toggle="modal" data-method="delBatch" >
                                        <i class="mdi mdi-window-close"></i>批量删除
                                    </button>
                                    <a class="btn btn-pink" href="#!" data-method="addUserRole"><i class="mdi mdi-plus"></i>设定角色</a>
                                    <!--<a class="btn btn-info" href="#!"><i class="mdi mdi-window-close"></i> 导入</a>-->
                                    <!--<a class="btn btn-pink" href="#!"><i class="mdi mdi-window-close"></i> 导出</a>-->
<!--                                    <a class="btn btn-cyan" href="#!" data-method="popChart"><i class="mdi mdi-search-web"></i> 报表</a>-->
                                </div>
                                <!-- 按钮区end-->
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="userTable" ></table>
                                </div>
                            </div>

                            <!-- 新增表单start-->
                            <div class="modal fade" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="exampleModalLabel">新增用户</h4>
                                        </div>
                                        <form id="userAddForm" method="post" enctype="multipart/form-data">
                                            <div class="modal-body">

                                                    <div class="form-group">
                                                        <label for="recipient-name" class="control-label">用户名：</label>
                                                        <input type="text" class="form-control" name="username" id="recipient-name">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="recipient-email" class="control-label">邮箱：</label>
                                                        <input type="text" class="form-control" name="email" id="recipient-email">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="recipient-tel" class="control-label">电话号码：</label>
                                                        <input type="text" class="form-control" name="tel" id="recipient-tel">
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="recipient-password" class="control-label">密码：</label>
                                                        <input type="password" class="form-control" name="password" id="recipient-password">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="recipient-confirmPassword" class="control-label">确认密码：</label>
                                                        <input type="password" class="form-control" name="confirmPassword" id="recipient-confirmPassword">
                                                    </div>
                                                    <div class="form-group">
                                                        <label  class="control-label">性别:</label>
                                                        <div class="clearfix">
                                                            <label class="coder-radio radio-inline radio-primary">
                                                                <input type="radio"  name="sex" value="0"><span>女</span>
                                                            </label>
                                                            <label class="coder-radio radio-inline radio-primary">
                                                                <input type="radio" name="sex" value="1" checked><span>男</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                <!-- 头像上传-->
                                                <div class="form-group">
                                                    <div class="col-sm-12">
                                                        <input id="file-pic" name="file" type="file" value="上传" multiple/>
                                                        <p class="help-block">支持jpg、jpeg、png、gif,txt,"docx","zip","xlsx"格式，大小没限制</p>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                <button type="button" data-method='save' class="btn btn-primary">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- 新增表单结束-->
                            <!-- 修改表单start-->
                            <div class="modal fade" id="userEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" >修改用户</h4>
                                        </div>
                                        <form id="userEditForm" method="post" enctype="multipart/form-data">
                                            <div class="modal-body">
                                                <input type="hidden" id="e_id" class="form-control" name="id">
                                                <div class="form-group">
                                                    <label for="recipient-name" class="control-label">用户名：</label>
                                                    <input type="text" id="e_username" class="form-control" name="username">
                                                </div>
                                                <div class="form-group">
                                                    <label for="recipient-email" class="control-label">邮箱：</label>
                                                    <input type="text" id="e_email" class="form-control" name="email" >
                                                </div>
                                                <div class="form-group">
                                                    <label for="recipient-tel" class="control-label">电话号码：</label>
                                                    <input type="text" id="e_tel" class="form-control" name="tel" >
                                                </div>
                                                <div class="form-group">
                                                    <label  class="control-label">性别:</label>
                                                    <div class="clearfix">
                                                        <label class="coder-radio radio-inline radio-primary">
                                                            <input type="radio"   name="sex" value="0" ><span>女</span>
                                                        </label>
                                                        <label class="coder-radio radio-inline radio-primary">
                                                            <input type="radio" name="sex" value="1" checked><span>男</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                <button type="button" data-method='editSave' class="btn btn-primary">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- 修改表单end-->


                        <!-- 设定角色start-->
                        <div class="modal fade" id="addUserRoleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" >添加用户角色</h4>
                                    </div>
                                    <form id="addUserRoleForm" method="post" enctype="multipart/form-data">
                                        <div class="modal-body">
                                            <input type="hidden" id="addRole_userid" class="form-control" name="id">
                                            <div class="form-group">
                                                <label for="recipient-name" class="control-label">用户名：</label>
                                                <input type="text" id="addRole_username" class="form-control" name="username">
                                            </div>
                                            <!-- 角色列表-->
                                            <div class="form-group row">
                                                <div class="col-xs-12">
                                                    <label for="recipient-name" class="control-label">选择权限：</label>
                                                </div>
                                                <div class="col-xs-12">
                                                    <label th:each="role : ${roles}" style="margin-right: 10px">
                                                        <input name="roles[]" type="checkbox" class="checkbox-child" th:id="'rid_'+${role.id}"  th:value="${role.id}">
                                                        <span th:text="${role.name}"></span>
                                                    </label>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            <button type="button" data-method='addUserRoleSave' class="btn btn-primary">保存</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- 设定角色end-->

                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<div th:include="~{views/common/include :: #jsStyle}"></div>
<script type="text/javascript"  th:src="@{/static/js/jquery.serialize-object.min.js}"></script>

<!--图表插件-->
<script type="text/javascript">

    $(document).ready(function(e){
        $('#userTable').bootstrapTable({
                      url: '/user/listpage',                      //请求后台的URL（*）
                      method: 'GET',                      //请求方式（*）
                       //toolbar: '#toolbar',              //工具按钮用哪个容器
                      striped: true,                      //是否显示行间隔色
                      cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                      pagination: true,                   //是否显示分页（*）
                      sortable: true,                     //是否启用排序
                      sortOrder: "asc",                   //排序方式
                      sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                      pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                      pageSize: 10,                     //每页的记录行数（*）
                      pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                      iconsPrefix: 'mdi', // 自定义表格右上角的图标，这个必须要定义，因为不是官方模板，icon图标样式名字不同会导致图标无法显示
                      icons:  {
                            refresh: 'mdi-refresh',              // 刷新图标
                            columns: 'mdi-format-list-bulleted', // 列图标
                            toggleOff: 'mdi-toggle-switch-off',  // 切换光
                            toggleOn: 'mdi-toggle-switch',       // 切换开
                            detailOpen: 'mdi-plus',              // 详情开
                            detailClose: 'mdi-minus',            // 详情光
                            fullscreen: 'mdi-fullscreen'         // 全屏图标
                        },
                      search: false,                      //是否显示表格搜索
                      strictSearch: true,
                      showColumns: true,                  //是否显示所有的列（选择显示的列）
                      showRefresh: true,                  //是否显示刷新按钮
                      minimumCountColumns: 2,             //最少允许的列数
                      clickToSelect: true,                //是否启用点击选中行
                      //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                      uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                      showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                      cardView: false,                    //是否显示详细视图
                      detailView: false,                  //是否显示父子表
                      singleSelect: false, //开启单选,想要获取被选中的行数据必须要有该参数
                       queryParams : function(params) {//上传服务器的参数
                        var temp = {
                            offset :params.offset + 0,// SQL语句起始索引
                            page : params.limit,  // 每页显示数量
                            username:params.username,
                            email:params.email
                        };
                        return temp;
                        },
            columns: [
                {
                    align : 'center',
                    checkbox: true
                },{
                field: 'id',
                title: '用户编号'
            }, {
                field: 'username',
                title: '用户名'
            }, {
                field: 'email',
                title: '邮件'
            }, {
                field: 'sex',
                title: '性别',
                align: 'center',
                formatter:sexFormatter
            }, {
                field: 'tel',
                title: '电话'
            }, {
                field: 'createTime',
                title: '创建时间'
            }, {
                field: 'headImg',
                title: '头像',
                formatter:headImgFormatter
            }, {
                field: 'roles',
                title: '所属角色',
                formatter:rolesFormatter
            },{
                field: 'doOpt',
                title: '操作',
                formatter : optFormatter
            }]
        });
            /**
             * 性别的格式化处理
             */
          function sexFormatter(value,row,index){

                  var value="";
                  if(row.sex=="1"){
                      value = "男";
                  }else{
                      value = "女" ;
                  }
                  return value;

          }

          function optFormatter(value,row, index){
              var c = '<a class="btn btn-xs btn-default" href="#!"  onclick=\'edit("' + row.id + '")\' title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>';
              var e = '<div class="btn btn-xs btn-default"  href="#!" onclick="del(\''+row.id+'\')" title="删除"  data-toggle="tooltip"><i class="mdi mdi-window-close"></i><div/> ';
              return c + e ;
          }

          function headImgFormatter(value,row, index){
                return "<img style=\"height:35px;width:35px;border-radius:50%;line-height:50px!important;\" src=\"/showimage/"+row.headImg+"\">"
                // return '<img  src="/static/images/logo-sidebar.png">';
          }

        function rolesFormatter(value,row, index){
              if(row.roles.length > 0){
                  var roleStr = "";
                  for(var i=0;i<row.roles.length;i++){
                      roleStr+= " <span class=\"label label-warning\">"+row.roles[i].name+"</span>"
                  }
                  return roleStr;
              }
              return "<span class=\"label label-danger\">未分配角色</span>";


          }
    })
    //更新修改数据方法
    function edit(id){
        //弹出修改的表单
        $("#userEditModal").modal({show:true})
        //数据的回显操作
        //清空一下表单数据
        $('#userEditForm')[0].reset();
        //获取选中一行数据
        var editRow = $("#userTable").bootstrapTable('getRowByUniqueId',id)
        $("#e_id").val(editRow.id)
        $("#e_username").val(editRow.username)
        $("#e_email").val(editRow.email)
        $("#e_tel").val(editRow.tel)
        var sexVal = editRow.sex
        if(editRow.sex){
           $("input[name=sex][value='1']").prop("checked",true);
        }else{
            $("input[name=sex][value='0']").prop("checked",true);
        }

    }

    function del(id){

        //根据id 删除数据
        $.get("/user/deleteUser",{"id":id},function(data){
            if(data.isSuccess){
                $.confirm({
                    title:'温馨提示',
                    content:'删除成功',
                    type:'green',
                    buttons:{
                        omg:{
                            text:'谢谢',
                            btnClass:'btn-green'
                        }
                    }
                })
                //刷新数据
                $("#userTable").bootstrapTable('refresh');
            }else{
                $.confirm({
                    title:'温馨提示',
                    content:'删除失败',
                    type:'red',
                    buttons:{
                        omg:{
                            text:'关闭',
                            btnClass:'btn-red'
                        }
                    }
                })
            }
        })

    }


    $(document).ready(function(e) {
        var userId ;
        //绑定事件<button data-method='add'> <a data-method='search'>
        $("button,a").on('click',function(){
            let methodName = $(this).data('method');
            if(methodName){
                doMethod[methodName]();
            }
        })

        var doMethod = {
            //条件用户角色弹框
            addUserRole:function(){
                //判断用户是否选中的数据，如果没有选中 给予提示
                let rows =  $("#userTable").bootstrapTable('getSelections');
                if(rows.length <= 0 ){
                    $.confirm({
                        title:'温馨提示',
                        content:'亲 请选中一行数据进行操作',
                        type:'green',
                        buttons:{
                            ok:{
                                text:'谢谢',
                                btnClass:'btn-green'
                            }
                        }
                    })
                    return;
                }

                //弹出设置权限对话框
                $("#addUserRoleModal").modal({show:true})
                //回显数据操作
                $("#addRole_userid").val(rows[0].id)
                $("#addRole_username").val(rows[0].username)
                let roles = rows[0].roles
                //先情况所有的多选框数据
                $("input[name='roles[]']").prop('checked',false)
                //设置权限
                roles.forEach((role,index)=>{
                    var rid = role.id;
                    $("#rid_"+rid).prop('checked',true)
                })

            },
            addUserRoleSave(){

                //保存用户角色 获取表单数据
                var urParamObj = $("#addUserRoleForm").serializeObject()
                var sendParam = {
                    "userId":urParamObj.id,
                    "roleIds":urParamObj.roles
                }
                $.ajax({
                    type:'POST',
                    url:'/user/saveUserRole',
                    dataType:'json',
                    data:JSON.stringify(sendParam),
                    contentType:'application/json;charset=utf-8',
                    success:function(data){
                        if(data.isSuccess){
                            $.confirm({
                                title:'温馨提示',
                                content:'保存成功',
                                type:'green',
                                buttons:{
                                    ok:{
                                        text:'谢谢',
                                        btnClass:'btn-green'
                                    }
                                }
                            })
                            $("#addUserRoleModal").modal('hide')
                            $("#userTable").bootstrapTable('refresh')
                        }else{
                            $.confirm({
                                title:'温馨提示',
                                content:'操作失败'+data.message,
                                type:'red',
                                buttons:{
                                    ok:{
                                        text:'谢谢',
                                        btnClass:'btn-red'
                                    }
                                }
                            })
                        }
                    }
                })
            },
            popChart:function(){
                // userChartModal
                $('#userChartModal').modal({
                    show: true,
                    backdrop:'static'
                });
            },
            delBatch:function(){
                //获取表格里面 选中的所有行数据
               let delRows =  $("#userTable").bootstrapTable('getSelections');
               if(delRows.length<=0){
                   $.confirm({
                       title:'温馨提示',
                       content:'亲，请选中至少一行数据进行删除',
                       type:'green',
                       buttons:{
                           omg:{
                               text:'谢谢',
                               btnClass:'btn-green'
                           }
                       }
                   })
               }else{
                   $.confirm({
                       title:'温馨提示',
                       content:'亲，您真的忍心把我删除掉吗?',
                       type:'green',
                       buttons:{
                           omg:{
                               text:'确定',
                               btnClass:'btn-green',
                               action:function(){
                                  //传递参数
                                   var ids=[]  //ids = 【1，2，3】
                                  for(var i=0;i<delRows.length;i++){
                                      ids.push(delRows[i].id)
                                  }
                                  //发送ajax请求删除数据
                                   $.ajax({
                                       url:'/user/deleteBatchUser',
                                       type:'post',
                                       data:{"ids":ids},
                                       success:function(data){
                                           if(data.isSuccess){
                                               $("#userTable").bootstrapTable('refresh')
                                           }
                                       }
                                   })
                               }
                           },
                           close:{
                               text:'取消'
                           }
                       }
                   })
               }
            },
            add:function(){
                //展示新增对话框
               $("#userAddModal").modal({
                   show:true
               })
            },
            search:function(){

               let username = $("#q_username").val();
               let email = $("#q_email").val();
               var queryParam={
                   query:{
                       username:username,
                       email:email
                   }
               }
               $('#userTable').bootstrapTable('refresh',queryParam)
            },
            save:function(){
                //新增保存操作
                //(1)获取验证框，看一下是否验证通过
                var bootstrapValidator = $('#userAddForm').data('bootstrapValidator');
                bootstrapValidator.validate();
                if(bootstrapValidator.isValid()){
                    //(2)如果通过 发送ajax到后台数据
                    let formParamObj = $('#userAddForm').serializeObject();
                    $.ajax({
                        url:'/user/addUser',
                        type:'POST',
                        data:formParamObj,
                        success:function(data){
                            //获取保存功能的用户id

                            if(data.isSuccess){
                                userId = data.userid;
                                //触发上传
                                if($('#file-pic').val() != null){
                                    $('#file-pic').fileinput('upload');
                                }
                                //(3)保存完之后，刷新表格,关闭对话框
                                $("#userAddModal").modal('hide');
                                $("#userTable").bootstrapTable('refresh');
                            }
                        }
                    })

                }


            },
            editSave:function(){

                //修改保存操作
                //(1)获取验证框，看一下是否验证通过
                var bootstrapValidator = $('#userEditForm').data('bootstrapValidator');
                bootstrapValidator.validate();
                if(bootstrapValidator.isValid()){
                    //(2)如果通过 发送ajax到后台数据
                    let formParamObj = $('#userEditForm').serializeObject();
                    $.ajax({
                        url:'/user/editUser',
                        type:'POST',
                        data:formParamObj,
                        success:function(data){
                            if(data.isSuccess){
                                //(3)保存完之后，刷新表格,关闭对话框
                                $("#userEditModal").modal('hide');
                                $("#userTable").bootstrapTable('refresh');
                            }
                        }
                    })

                }


            }

        }

        //上传 --定义上传框 fileinput
        $('#file-pic').fileinput({
            //初始化上传文件框
            language: "zh",//配置语言
            showUpload : false, //显示整体上传的按钮
            showRemove : true,//显示整体删除的按钮
            uploadAsync: true,//默认异步上传
            uploadLabel: "上传",//设置整体上传按钮的汉字
            removeLabel: "移除",//设置整体删除按钮的汉字
            uploadClass: "btn btn-primary",//设置上传按钮样式
            showCaption: true,//是否显示标题
            dropZoneEnabled: false,//是否显示拖拽区域
            uploadUrl: '/file/uploadFile',//这个是配置上传调取的后台地址，本项目是SSM搭建的
            maxFileSize : 9999,//文件大小限制
            maxFileCount: 9999,//允许最大上传数，可以多个，
            enctype: 'multipart/form-data',
            allowedFileExtensions : ["jpg", "png","gif","docx","zip","xlsx","txt"],/*上传文件格式限制*/
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            showBrowse: true,
            browseOnZoneClick: true,
            slugCallback : function(filename) {
                return filename.replace('(', '_').replace(']', '_');
            },
            uploadExtraData: function(previewId, index) {   //额外参数的关键点
                //后台根据userid 更新头像
                return { id: userId };
            }
        });
        //上传完之后
        $('#file-pic').on("fileuploaded", function(event, data, previewId, index) {
            var response = data.response;
            if(response.isSuccess){
                $.confirm({
                    title:'温馨提示',
                    content:'保存成功',
                    type:'green',
                    confirm: function(){
                        $.alert('OK!');
                    },
                    cancel: function(){
                        $.alert('canel!')
                    }
                })

            }else{
                $.confirm({
                    title:'温馨提示',
                    content:'操作失败',
                    type:'red',
                    confirm: function(){
                        $.alert('OK!');
                    },
                    cancel: function(){
                        $.alert('canel!')
                    }
                })
            }

        });

        //验证规则
        $('#userAddForm,#userEditForm').bootstrapValidator({
            live: 'enabled',//字段值有变化就触发验证 disabled,submitted 当点击提交时验证并展示错误信息
            message: '信息不合法',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名不合法',
                    validators: {
                        notEmpty: {
                            message: '用户名必须填写,不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '长度必须是6到30个字符'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '用户名必须有字母数字下划线组成'
                        }
                    }
                },
                tel: {
                    message: '电话不合法',
                    validators: {
                        notEmpty: {
                            message: '电话号码,不能为空'
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '长度必须是11位'
                        },
                        regexp: {
                            regexp: /^1\d{10}$/,
                            message: '手机号格式错误'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能空'
                        },
                        emailAddress: {
                            message: '输入邮箱不合格'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                },
                confirmPassword: {
                    validators: {
                        notEmpty: {
                            message: '确认密码不能为空'
                        },
                        identical: {
                            field: 'password',
                            message: '两次密码不一样哟....'
                        },
                        different: {
                            field: 'username',
                            message: '密码不能和用户名相同'
                        }
                    }
                }
            }
        });
    })


</script>



<style>
    .my-container {
        float: left;
        display: inline-block;
        margin-right:30px;
    }

    .myLabel-content ,.myText-content,.myBtn-content{
        float: left;
        display: inline-block;
        line-height: 40px;
        margin-left: 10px;
    }
    .myLabel-content,.myText-content input[type='text'],.myBtn-content .btn {
        height: 38px;
        font-size: 15px;
    }
    .myBtn-content .btn {
        margin-bottom: 10px;
        margin-right: 20px;
    }
</style>



</body>
</html>
